<div ng-include="'components/navbar/navbar-inner.html'"></div>
    
    <section class="content topic">
        <div class="container">
            
            <div class="row">
                <div class="col-md-6"><h3 class="category-name">{{questionData.category.name}}</h3></div>
                <div class="col-md-6">
                    <div class="category-info">
                        <a href="#" class="view-all">View all topics</a>
                        <a href="#" class="total-questions">95 questions</a>
                        <a href="#" class="total-votes">160 votes</a>
                        <a href="#" class="total-decisions">86 decisions</a>
                    </div>
                </div>
            </div>
        </div>

        <hr />
        
        <div class="container">
        <div class="row topic-graph">
            <div class="col-md-6">
                <h4 class="topic-question">{{questionData.question}}</h4>
                <span class="topic-posted">Posted by {{questionData.postedBy.firstName}}, {{questionData.postedOn}}</span>

                <ol class="topic-options" type="a">
                    <li ng-repeat="answer in questionData.answers">   
                        <a class="simply-decide" ng-click="decide(answer)" ng-if="questionData.postedBy.id == stateCard.userId" ng-show="questionData.decision.decision_made == false">Click here to SD!</a>
                        <span ng-click="castVote(answer)">
                            <span class="radio" ng-class="{'active' : answer.active || (questionData.decision.decision_made && (questionData.decision.answer_id == answer.answer_id))}" data-group="group1"></span>
                            <span ng-bind-html="answer.answer"></span> 
                            <span class="vote-count">({{answer.votes}} votes)</span>
                        </span>
                        </li>
                        
                    </ol>
                </div>
                <div class="col-md-6">
				<!-- Chart -->
					<svg class="chart"></svg>
				<!-- Chart Ends -->
				<!-- <div class="chart-function">
					<a ng-click="sortBars()">Sort by value</a><span> | </span><a ng-click="reset()">Reset chart</a>
				</div> -->
				
				<!-- Tooltip -->
				<div id="tooltip">
					<p id="alphabet">A</p>
					<span id="value">100</span><span> SD users selected this option.</span> 
				</div>
                </div>
            </div> 
            </div>
    </section>
	
    
    <section class="content topic-other-questions">
        <div class="container">
            <div class="topic-questions-carousel">
                <div class="question">
                    <p class="title">Which pizza you like most</p>
                    <hr />
                    <a class="question-views">160</a><a class="question-decisions">80</a>
                </div>
                <div class="question">
                    <p class="title">A recent fitness walk left you breathless, and you&rsaquo;ve been having trouble sleeping during the night</p>
                    <hr />
                    <a class="question-views">160</a><a class="question-decisions">80</a>
                </div>
                <div class="question">
                    <p class="title">Which pizza you like most</p>
                    <hr />
                    <a class="question-views">160</a><a class="question-decisions">80</a>
                </div>
                <div class="question">
                    <p class="title">Which pizza you like most</p>
                    <hr />
                    <a class="question-views">160</a><a class="question-decisions">80</a>
                </div>
                        </div>
            </div>
    </section>
    


<!-- Content Section -->
<section class="content">
    <div class="container">
        <div class="row">

            <div class="col-md-6 comments-area">
                <h3>Comments</h3>
                <div class="form-group">
                    <textarea rows="3" class="form-control" id="comment-text" ng-model="addComment" placeholder="Post your opinion here"></textarea>
                    <button ng-click="postComment()" class="btn btn-default" type="button">Submit</button>
                </div>
                <p ng-show="!commentsData.length">Be the first one to add a comment here</p>
                <ul class="comments">
                    <li ng-repeat="item in commentsData">
                        <div class="comment-header">
                            <span class="posted-by">Posted by <span class="user">{{item.record.posted_user_name}}</span> on <span class="posted-date">{{item.record.posted_date}}</span><span>
                        </div>
                        <p class="comment">{{item.record.comment}}</p>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</section>
<!-- Content Section Ends -->